<template>
  <div class="good-main">
    <IconCard imgUrl="./images/good.png" title="推荐商品"></IconCard>
    <div class="good-list">
      <ul>
        <li v-for="item in goodsList" :key="item.id">
          <img :src="item.imgUrl" alt="" />
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "Good",
  data() {
    return {
      goodsList: [
        {
          id: 1,
          imgUrl: "./images/goods1.jpg",
        },
        {
          id: 2,
          imgUrl: "./images/goods2.jpg",
        },
        {
          id: 3,
          imgUrl: "./images/goods3.jpg",
        },
        {
          id: 4,
          imgUrl: "./images/goods4.jpg",
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.good-main {
  .good-list {
    background-color: #fff;
    
    ul {
      display: flex;
      flex-wrap: wrap;
      li {
        width: 50%;
        // &:nth-child(2n-1){
        //   margin-right: .0267rem;
        // }
        // &:nth-child(2n){
        //   margin-left: .0267rem;
        // }
        img {
          width: 100%;
        }
      }
    }
  }
}
</style>